<template>
  <div class="companyName">
    <el-autocomplete :placeholder="placeholder" style="width: 290px;"
                     :debounce="0" :fetch-suggestions="querySearch2" @select="handleSelect($event)"
                     @keydown.native="keydown($event)"
                     :trigger-on-focus="true"
                     v-model="inputName" clearable>
      <template slot-scope="{ item }">
        <section class="querySearch-autocomplete">
          <section class="name-item">
            <section class="name"><span v-if="item.id">{{ item.names.substr(0, 1) }}</span></section>
            {{ item.names }}
          </section>
          <section>
          </section>
        </section>
        <div></div>
      </template>
    </el-autocomplete>
  </div>
</template>
<script>
import {getTreeData, getList} from '@/api/market/product.js'
import {dynamicWindowList} from '@/api/market/crm.js'

export default {
  data () {
    return {
      isTypeCompany: false,       // 是否需要前端自己传 sql 语句
      newDataPage: {
        pageSize: 10,
        pageNo: 1
      },                           // 新的分页数据设置
      newData: [],                 // 新的数据list全部数据
      itemDictCode: '',            // 需要使用的sql数据，可在父组件定义，默认是空
      treeDataList: [],            // 自己传sql数据展示tree数据
      tableData: [],               // 根据前端设置的分页情况处理的数据list
      loading: true,               // table 加载状态
      dialogVisible: false,
      inputName: '',
      data: [],
      title: '选择产品',
      page: {
        pageSize: 10,
        pageNo: 1,
        total: 20
      },
      defaultProps: {
        // 修改el-tree默认data数组参数
        label: 'name',
        id: 'id',
        parentId: 'parentId',
        children: 'children'
      }
    }
  },
  props: ['placeholder', 'dataItem'],
  methods: {
    keydown (e) {
      if (e.keyCode === 32) {
        e.returnValue = false
      }
    },
    // 操作点击选择搜索到的数据可以不要
    handleSelect ($event) {
      this.inputName = $event.names
      this.$emit('getProductData', $event)
    },
    querySearch2 (queryString, cb) {
      // 判断调用接口itemType
      // 调用 callback 返回建议列表的数据
      if (this.dataItem.itemType === 2) {
        dynamicWindowList({
          keySQL: this.dataItem.itemDictCode
        }).then((res) => {
          if (res.data.code === '200') {
            /*
            *  返回两条数据
            *  treeDataList  是tree树形结构
            *  dataList      是tableList 数据
            * */
            this.values = []
            for (let index = 0; index < res.data.result.dataList.length; index++) {
              let element = {
                id: res.data.result.dataList[index].id,
                names: res.data.result.dataList[index].name
              }
              this.values.push(element)
            }
            cb(this.values)// 返回搜索下拉框里面数据
          }
        })
      } else {
        getList({ // 后台地址
          state: 1,
          // pageSize: params.pageSize,
          pageSize: -1,  // -1 不分页
          pageNo: this.page.pageNo,
          name: queryString
        }).then((res) => {
          // console.log(res)
          if (res.data.code === '200') {
            this.values = []
            for (let index = 0; index < res.data.result.list.length; index++) {
              let element = {
                id: res.data.result.list[index].id,
                names: res.data.result.list[index].name
              }
              this.values.push(element)
            }
            cb(this.values)// 返回搜索下拉框里面数据
          }
        })
      }

      // 调用 callback 返回建议列表的数据
    }

  }
}
</script>
<style scoped lang="scss">
// .dialog-container {
//   width: 100%;
// }

// .container {
//   width: 100%;
//   height: 500px;
//   display: flex;
// }

// .left-container {
//   margin-right: 20px;
//   width: 100px;
//   overflow: auto; /*当内容超过，出现滚动条*/
// }

// .dialog-footer {
//   width: 200px;
//   margin: 0 auto;
//   margin-bottom: 20px;
// }

// .el-table .success-row {
//   background: #f0f9eb;
// }

// ::v-deep .el-table .warning-row {
//   background: #f7f7f7;
// }
::v-deep .el-pagination {
  margin-top: 30px;
  text-align: right;
}

::v-deep .el-dialog__body {
  padding: 20px 20px 0 !important;
}

.dialog-container {
  width: 100%;
}

/*.container {*/
/*  width: 100%;*/
/*  !*height: 500px;*!*/
/*  display: flex;*/
/*  !*height: 550px;*!*/
/*}*/

/*.left-container {*/
/*  width: 180px;*/
/*  overflow: auto; //!*当内容超过，出现滚动条*!*/
/*  background: #FFFFFF;*/
/*  box-shadow: 0px 0px 6px 0px rgba(4, 0, 0, 0.1);*/
/*  border-radius: 6px;*/
/*  // margin-right: 10px;*/
/*  height: 450px;*/
/*}*/

.dialog-footer {
  width: 200px;
  margin: 0 auto;
  margin-bottom: 20px;
}

.el-table .success-row {
  background: #f0f9eb;
}

::v-deep .el-table .warning-row {
  background: #f7f7f7;
}

.truck-choose-wrapper {
  ::v-deep.el-dialog {
    .el-dialog__body {
      padding: 20px 20px 24px !important;
    }
  }
}
</style>
